<!-- 重复字段详情 -->
<template>
  <div class="detail-index-content">
    <Modal
      v-model="modalValue"
      title="重复率字段详情"
      footer-hide
      width="960px"
      @on-cancel="cancel"
    >
      <div class="repetition-rtate-head">
        <div
          class="repetition-rtate-head-item"
          :class="
            item.id == currentId ? 'repetition-rtate-head-item-current' : ''
          "
          v-for="item in repetitionRtateList"
          :key="item.id"
          @click="checkType(item)"
        >
          <h4>{{ item.name }}</h4>
          <p>
            <strong>{{ item.num }}</strong
            ><span>条</span>
          </p>
        </div>
      </div>
      <Row class="main-box">
        <Col span="24">
          <Table :columns="columns" :data="listData">
            <template slot-scope="{ row }" slot="construction">
              <div v-html="row.construction"></div>
            </template>
            <template slot-scope="{ row }" slot="projectName">
              <div v-html="row.projectName"></div>
            </template>
            <template slot-scope="{ row }" slot="owner">
              <div v-html="row.owner"></div>
            </template>
            <template slot-scope="{ row }" slot="projectAddress">
              <div v-html="row.projectAddress"></div>
            </template>
          </Table>
        </Col>
      </Row>
    </Modal>
  </div>
</template>

<script type="text/javascript">
import {
  GetBusiInfoData, // 查询 重复率
  GetRepeatData, // 查询 重复率 列表查询
} from "@/api/enterpriseInforManage.js";

import { returnStr } from "@/libs/util.js";

export default {
  name: "changeBeforeAfter",
  components: {},
  props: {
    changeTypes: {
      type: Number,
      default: 0,
    },
    companyId: {
      type: String,
      default: "",
    },
    isHide: {
      type: Boolean,
      default: false,
    },
    repeatType: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      columns: [
        // {
        //   title: "施工方",
        //   slot: "projectPosition",
        // },
        {
          title: "施工方",
          slot: "construction",
        },
        {
          title: "项目名称",
          slot: "projectName",
        },
        {
          title: "业主方",
          slot: "owner",
        },
        {
          title: "项目地址",
          slot: "projectAddress",
        },
        {
          title: "预计产值规模(万元)",
          key: "outputScale",
        },
        {
          title: "发布时间",
          key: "publishTime",
        },
      ],
      repetitionRtateList: [
        {
          id: 0,
          name: "施工方单位",
          num: 0,
        },
        {
          id: 1,
          name: "业主方单位",
          num: 0,
        },
        {
          id: 2,
          name: "项目名称",
          num: 0,
        },
        {
          id: 3,
          name: "项目位置",
          num: 0,
        },
      ],
      listData: [],
      currentId: 0,
      modalValue: false,
    };
  },
  methods: {
    // 获取企业信息详情
    async getBusiInfoDataData() {
      let params = {
        busiInfoId: this.$props.companyId,
      };
      let data = await GetBusiInfoData(params);
      this.formData = data;
      let itemObj = {
        0: "constructionRepeatCount",
        1: "ownerRepeatCount",
        2: "nameRepeatCount",
        3: "placeRepeatCount",
      };
      console.log(data, "data");
      for (let item in this.repetitionRtateList) {
        this.repetitionRtateList[item].num = data[itemObj[item]];
      }
    },
    async getRepeatDataData() {
      let params = {
        repeatType: this.currentId,
        busiInfoId: this.$props.companyId,
      };
      let { data } = await GetRepeatData(params);
      this.listData = data;
    },
    convertStr(data, key, keyTo) {
      return returnStr(data, key, keyTo);
    },
    cancel() {
      this.$emit("update:updateIsHide", false);
    },
    checkType(item) {
      this.currentId = item.id;
      this.getRepeatDataData();
    },
  },
  created() {
    // 数据查询
    this.currentId = this.$props.repeatType;
    this.getBusiInfoDataData();
    this.getRepeatDataData();
    this.modalValue = this.$props.isHide;
  },
};
</script>

<style lang="less" scoped>
.page-main-content {
  background: #fff;
  border-radius: 6px;
  max-height: 60vh;
  overflow: auto;
  margin-top: 0;
}

.states-box {
  padding-bottom: 20px;
  margin: 0 0 20px 0;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f2f2f2;
}
.repetition-rtate-head {
  display: flex;
  .repetition-rtate-head-item {
    background: #f2f2f2;
    margin-right: 15px;
    border-radius: 8px;
    padding: 15px;
    width: 25%;
    cursor: pointer;
    h4 {
      font-weight: normal;
      font-size: 16px;
    }
    p {
      margin-top: 5px;
    }
    strong {
      font-size: 24px;
      font-weight: normal;
    }
    span {
      color: #999;
      font-size: 14px;
      margin-left: 3px;
    }
  }
  .repetition-rtate-head-item:nth-child(4) {
    margin-right: 0;
  }
  .repetition-rtate-head-item-current {
    background: rgba(45, 143, 255, 0.14);
  }
}
</style>
